<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Food Facts Web</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/page.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="js/api.js"></script>
    <script type="text/javascript" src="js/page-index.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Food Facts Web Demo</a>
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">成分分析</a></li>
            <li><a href="create.html">食谱创建</a></li>
        </ul>
    </div>
    </div>
</nav>

<div class="container">
<div class="page-header">
     <h3>食品成分搜索、分析</h3>
</div>


<div class="row">
          <div class="col-md-3">
            <br>
            <div class="input-group">
                <input type="text" class="form-control" id="search-text"><span class="input-group-addon btn btn-success" id='search'>搜索</span>
            </div>
            <br>
            <div id="search-result">
              <div><b>请输入产品名搜索。示例：apple、chocolate等</b></div>
            </div>
          </div>
          <div class="col-md-4">
          <table class="table">
           <thead>
              <tr>
                 <th>基本信息</th>
                 <th>结果</th>
              </tr>
           </thead>
           <tbody>
              <tr>
                 <td>ID</td>
                 <td class="detect-result" id='detect-id'><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
              <tr>
                 <td>品牌</td>
                 <td class="detect-result" id="detect-brands"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
              <tr>
                 <td>国家</td>
                 <td class="detect-result" id="detect-country"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
<!--               <tr>
                 <td>种类</td>
                 <td class="detect-result" id="detect-category"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr> --> 
              <tr>
                 <td>规格</td>
                 <td class="detect-result" id="detect-quantity"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
           </tbody>
           <thead>
              <tr>
                 <th>每100克营养成分</th>
                 <th>结果</th>
              </tr>
           </thead>
           <tbody>
              <tr>
                 <td>能量</td>
                 <td  class="detect-result" id="detect-energy"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
              <tr>
                 <td>脂肪</td>
                 <td  class="detect-result" id="detect-fat"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
              <tr>
                 <td>糖类</td>
                 <td class="detect-result" id="detect-sugar"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
              <tr>
                 <td>碳水化合物</td>
                 <td class="detect-result"  id="detect-carbohydrates"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
              <tr>
                 <td>蛋白质</td>
                 <td  class="detect-result"  id="detect-protein"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
              <tr>
                 <td>盐分</td>
                 <td  class="detect-result"  id="detect-salt"><span class="glyphicon glyphicon-question-sign text-primary"></span></td>
              </tr>
           </tbody>
        </table>
          </div>
          <div class="col-md-5">
                <div id="pie-container" style="min-width:600px;height:500px"></div>
          </div>
</div>




</div>
</body>
</html>